import { useState, useEffect } from 'react';
import './App.less';
import  Article from './components/Article';
import Topic from './components/Topic'
import sculpture from './images/头像.png';
import icon1 from './images/icon1.png';
import icon2 from './images/icon2.png';
import achievement from './images/achievement.png'
import follow from './images/follow.png'
import tag from './images/tag.png'
import side1 from './images/side-1.png'
import side2 from './images/side-2.png'
import side3 from './images/side-3.png'

const articles = [
  {
    type: 0,
    time: '2小时',
    question: {
      title: '计费的问题，这个将会有很多回答，不需要“我要回答”按钮？',
      questioner: {
        picture: sculpture,
        name: '杉本博司',
      },
      time: '2017-04-08'
    },
  },
  {
    type: 1,
    time: '2小时',
    question: {
      title: '有什么快速生成1000万条数据并插入数数据并数据并数据并据库的方法？',
      answer: {
        answerer: {
          picture: sculpture,
          name: '杉本博司',
          content: '目前在项目4开发中，计划采用腾讯文智的文本分类，分析文本得到主题类别在链接中可以看到腾讯官方告知的文本分类API支持类别共30个值然而调用文智接口分析一段文本得到如一段文本得到得到如一段文本得到如下主析一段文本得到如一段析一段文本得到如... 展开详情',
          support: 35,
          comment: 25
        },
        time: '2小时'
      }
    },
  },
  {
    type: 2,
    time: '2小时',
    tag: {
      name: '数据库',
      icon: icon1,
      introduce: '网站备案是4是腾讯云提供的一项协助使用大陆服务器开办网站的用户办理备案的业务。'
    }
  },
]
const topic=[
  {
    icon: icon1,
    name: '直播',
    hasFollow: false,
    introduce: '域名备案、云+校园、计费、云+校园、计费云服务器CVM、内容分发网络CDN'
  },
  {
    icon: icon2,
    name: '数据库',
    hasFollow: true,
    introduce: '域名备案、云+校园、计费、云+校园、计费云服务器CVM、内容分发网络CDN'
  },
  {
    icon: icon1,
    name: '直播',
    hasFollow: false,
    introduce: '域名备案、云+校园、计费、云+校园、计费云服务器CVM、内容分发网络CDN'
  }
]

function App() {
  const [size, setSize] = useState(document.body.clientWidth)
  useEffect(()=>{
    window.addEventListener('resize', resize);
    return ()=>{
      window.removeEventListener('resize',resize);
    }
  },[])
  const resize = (e) => {
    setSize(document.body.scrollWidth)
  };
  return (
    <div className="App App-wrapper">
      {
        size<768 ? <header className="Phone-header">
            <nav className="Phone-nav">LOGO</nav>
          </header> :
            <header className="App-header">
              <nav className="Header-nav">
                <span>
                  <span className="Header-logo">LOGO</span>
                  <span> | </span>
                  <span className="Header-menu">
                    <li><a href="">首页</a></li>
                    <li><a href="">腾云阁</a></li>
                  </span>
                </span>
                <span>
                  <button type="button">提问题</button>
                  <span className="Header-message">消息<span>12</span></span>
                </span>
              </nav>
            </header>
      }
      {
        !(size<768) &&
        <hgroup className="App-hgroup">
          <div className="hgroup-content">
            <div>
              <h1>三本耀司</h1>
              <h2>技术总监，架构平台部专家工程师</h2>
            </div>
            <button type="button">编辑个人资料</button>
          </div>
        </hgroup>
      }
      <article className="App-article">
        <div className="Article-title">文章</div>
        {articles.map(item=><Article {...item}/>)}
        <div className="Article-title">话题</div>
        <div className="Article-wrapper">
          {topic.map(item=><Topic {...item} size={size}/>)}
        </div>
      </article>
      {
        !(size<768) &&
        <aside className="App-aside">
          <div><img src={achievement} />个人成就</div>
          <ul>
            <li><img src={side1} /><div><h1>获得 21 次官方精选</h1><h2>本周排名 342</h2></div></li>
            <li><img src={side2} /><div><h1>获得 21 次官方精选</h1><h2>本周排名 342</h2></div></li>
            <li><img src={side3} /><div><h1>获得 21 次官方精选</h1><h2>本周排名 342</h2></div></li>
          </ul>
          <div><img src={follow} />我关注的问题<span>23</span></div>
          <div><img src={tag} />我关注的标签<span>21</span></div>
        </aside>
      }
    </div>
  );
}

export default App;
